'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NumberIcon = exports.DeleteIcon = exports.MoveIcon = exports.Input = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DeleteIcon = exports.DeleteIcon = function DeleteIcon(props) {
  return _react2.default.createElement(
    'div',
    _extends({}, props, {
      className: 'jsx-2575233858' + ' ' + (props.className != null && props.className || 'rmc-icon-container')
    }),
    _react2.default.createElement('div', {
      className: 'jsx-2575233858' + ' ' + 'rmc-remove'
    }),
    _react2.default.createElement(_style2.default, {
      styleId: '2575233858',
      css: '.rmc-icon-container.jsx-2575233858{position:absolute;top:-10px;right:-10px;width:20px;height:20px;border-radius:50%;cursor:pointer;float:right;background:#bbb;}.rmc-remove.jsx-2575233858{color:white;position:absolute;margin-top:9px;margin-left:4px;}.rmc-remove.jsx-2575233858:hover{cursor:pointer;}.rmc-remove.jsx-2575233858:before{content:\'\';position:absolute;width:12px;height:1px;background-color:currentColor;-webkit-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.rmc-remove.jsx-2575233858:after{content:\'\';position:absolute;width:12px;height:1px;background-color:currentColor;-webkit-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}'
    })
  );
};

var MoveIcon = exports.MoveIcon = function MoveIcon(props) {
  return _react2.default.createElement(
    'div',
    _extends({}, props,{   
      style: {
        width:'16px',
        height:'16px',
        fontSize:'16px',
        background:'#262626',
        textAlign:'center',
        lineHeight:'16px',
        color:'white',
        opacity:0.8,
        position:'absolute',
        top:'-16px',
        display: 'inline-block',
        position: 'absolute',
        left: '50%',
        transform: 'translate(-50%)',
        cursor:'move'
      },         
    }),    
    "+"
  );
};

var Input = exports.Input = function Input(props) { 
  var text=props.text;
  var fontSize=props.fontsizes;
  var fontSpace=props.fontspace;
  var fontStyleTagChecked=props.fontstyletagchecked;
  var fontWeightTagChecked = props.fontweighttagchecked; 
  // return _react2.default.createElement(
  //   'textarea',
  //   _extends({}, props,{ 
  //     defaultValue:text,  
  //     style: {
  //       width:'100%',
  //       height:'100%',
  //       fontSize:`${fontSize}px`,    
  //       letterSpacing: `${fontSpace}px`, 
  //       fontStyle:fontStyleTagChecked==='true'?"italic":"normal",
  //       fontWeight:fontWeightTagChecked==='true'?"bold":"normal",         
  //     },         
  //   })
  // );
  return _react2.default.createElement(
    'span',
    _extends({}, props,{       
      style: {
        width:'100%',
        // height:'100%',
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%,-50%)",
        fontSize:`${fontSize}px`,    
        letterSpacing: `${fontSpace}px`, 
        fontStyle:fontStyleTagChecked==='true'?"italic":"normal",
        fontWeight:fontWeightTagChecked==='true'?"bold":"normal",         
      },         
    }),
    text
  );
};

var NumberIcon = exports.NumberIcon = function NumberIcon(_ref) {
  var number = _ref.number;
  return _react2.default.createElement(
    'div',
    {
      className: 'jsx-3916994432' + ' ' + 'rmc-number'
    },
    number,
    _react2.default.createElement(_style2.default, {
      styleId: '3916994432',
      css: '.rmc-number.jsx-3916994432{width:15px;height:15px;float:left;font-size:12px;background:#262626;text-align:center;line-height:15px;color:white;opacity:0.8;}'
    })
  );
};

var number = _propTypes2.default.number;


NumberIcon.propTypes = {
  number: number
};

NumberIcon.defaultProps = {
  number: ''
};